<template>
  <div class="bigBox">
    <div class="loginBg">
      <div class="login">
        <div class="login_box">
          <!-- logo -->
          <el-row>
            <el-col :span="21">
              <el-row type="flex" justify="left" align="middle">
                <div>
                  <img src="../../assets/logo.jpg" alt>
                </div>
                <span>{{ lang.loginpage }}</span>
              </el-row>
            </el-col>
            <el-col :span="3">
              <lang class="lang" @changeLanguage="changeLanguage"/>
            </el-col>
          </el-row>
          <!-- 登录表单 -->
          <el-form ref="loginformRef" :model="loginform" :rules="rules" style="margin-top:20px">
            <el-form-item prop="username">
              <el-input
                v-model="loginform.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user-solid"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password2">
              <el-input
                v-model="loginform.password2"
                placeholder="请输入密码"
                :type="type ? 'password' : ''"
              >
                <template #prefix>
                  <svg-icon icon-class="password" class="passwordSvg"></svg-icon>
                </template>
                <template #suffix>
                  <img
                    v-if="type"
                    src="../../assets/password.jpg"
                    style="margin-top:10px"
                    @click="type = !type"
                  >
                  <svg-icon
                    v-else
                    style="color:#b0b4b8;font-size:20px;margin-top:10px"
                    icon-class="passwordEey"
                    class="svgIcon"
                    @click="type = !type"
                  ></svg-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <el-row>
            <el-button
              type="primary"
              style="width:100%;height:50px; font-size:25px"
              @click="login"
            >{{ lang.login }}</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      lang: {
        login: '登录',
        loginpage: '用户登录'
      },
      loginform: {
        username: 'root@admin.com',
        password2: '123456'
      },
      type: true,
      rules: {
        username: [{ required: true, message: '请输入用户名/邮箱', trigger: 'blur' }],
        password2: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    const a = this.$i18n.locale
    const b = this.$i18n.messages
    this.changeLanguage(b[a])
  },
  mounted() {},
  methods: {
    login() {
      this.$refs.loginformRef.validate(async valid => {
        if (valid) {
          try {
            const password = this.$sha256(this.loginform.password2)
            await this.$store.dispatch('user/login', {
              username: this.loginform.username,
              password
            })
            this.$router.push('/')
            this.$message.success('登录成功  欢迎你呦~')
          } catch (err) {
            this.$message.error('密码或账号错误')
          }
        }
      })
    },
    changeLanguage(language) {
      this.lang.login = language.login.login
      this.lang.loginpage = language.login.loginpage
    }
  }
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  top: -60px;
  height: 720px;
  width: 100%;
  background: url('../../assets/logingBg.989212c0.png') no-repeat 100% 100%;
  position: relative;
  .login_box {
    width: 550px;
    height: 330px;
    background-color: #f5f5f5;
    position: absolute;
    left: 20%;
    top: 30%;
    padding: 30px;
    box-sizing: border-box;
    span {
      position: relative;
      top: -4px;
      left: 10px;
      font-size: 25px;
    }
  }
}
::v-deep .el-input__inner {
  height: 55px !important;
  padding-left: 40px;
}
::v-deep .el-input__icon {
  margin-left: 5px;
  color: #889aa4;
  font-size: 16px;
}
.lang {
  position: relative;
  right: -36px;
  top: 13px;
}
.loginBg {
  width: 100%;
  height: 720px;
  background: url('../../assets/bg.jpg') no-repeat 90% 100%;
}
.bigBox {
  background-image: linear-gradient(to right, #1493fa, #01c6fa);
}
.svgIcon {
  position: relative;
  bottom: -9px;
  right: 13px;
}
.passwordSvg {
  position: absolute;
  top: 20px;
  left: 10px;
  font-size: 16px;
  color: #889aa4;
}
</style>
